<template>
    <div class="child-tabs-warpper">
        <template v-for="item in childTabs" :key="item.sort">
            <div class="child-tab-item-content">
                <div @click="selectedChildTab(item)" class="child-tab-item" :class="{'tab-active': item.id === activeTabId }">{{ item.bizInfo }}</div>
                <template v-if="componentData && componentData.length > 0 && item.id === activeTabId">
                    <NestedDraggable  :componentData="componentData"></NestedDraggable>
                </template>
            </div>
        </template>
    </div>
</template>
<script lang="ts" setup>
import { computed, reactive, toRefs, ref, inject } from 'vue'
// import { inject } from 'vue'
import NestedDraggable from './nestedDraggable.vue'
import { IComponentItem } from '../../Editor/interface/IComponentItem'

interface IChildTabCompMap {
    [key:string]: IComponentItem[]
}
interface ITabItem {
    id?: string
    sort?: string
    bizInfo?: string
}
interface Props {
    activeLaunchId: number
    launchList: any
}
const props = defineProps<Props>()
const { activeLaunchId, launchList } = toRefs(props)

const childTabCompMap:IChildTabCompMap | undefined = inject('childTabCompMap')

const activeTabId = computed({
    get() {
        return launchList.value[activeLaunchId.value]?.activeTabId
    },
    set(val) {
        launchList.value[activeLaunchId.value].activeTabId = val
    }
})
const childTabs = computed({
    get() {
        return launchList.value[activeLaunchId.value]?.componentDetailList
    },
    set(val) {
        console.log(999, val)
        launchList.value[activeLaunchId.value].componentDetailList = val
    }
})
const selectedChildTab = (childTab: ITabItem) => {
    activeTabId.value = childTab.id
}

const componentData = computed(() => {
    if (!activeTabId.value || !childTabCompMap) return []
    return childTabCompMap[activeTabId.value]
})
</script>
<style>
.child-tabs-warpper .tab-active {
    color: green;
}
.child-tab-item-content {
    padding-left: 20px;
    text-align: left;;
}
.child-tabs-item {
    cursor: pointer;
}
</style>